<template>
	<view>
		<search-nav></search-nav>
		<view class="content">
			<text class="hotSearch">热门搜索</text>
			<image class="content-image" src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605167154963.jpg" mode="widthFix"></image>
			<linex></linex>
			<view class="hotTitle">
				<view v-for="(item,index) in hotTitle" :key="index">{{item}}</view>
			</view>
			<linex></linex>
			
		</view>
		<text class="hotSearch2">热门搜索</text>
		<view class="" v-for="(item,index) in hotSearch" :key="index" style="margin: 20rpx 10rpx; border-left: 10rpx solid #FD6801; ">
			<view class="" style="margin-left: 20rpx; display: flex; justify-content: space-between; align-items: center;">
				<view class="">{{item}}</view>
				<view class="iconfont icon-you"></view>
			</view>
			<linex></linex>
		</view>
		
		
	</view>
</template>

<script>
	import searchNav from "../../componets/search/search-nav.vue"
	export default {
		components:{
			searchNav
		},
		data() {
			return {
				hotTitle: ['领券中心', 'Redmi K20', 'Redmi14', '智能积木', '老年机', '手环', '电脑'],
				hotSearch:['小米','小米8 屏幕指纹版','小米驱虫手环','小米电视机']
			};
		},
		onShow() {

		},
		methods: {

		}

	}
</script>

<style lang="less">


	.content {
		padding: 0 10rpx;
		.content-image {
			border-radius: 15rpx;
		}
		.hotTitle {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			view {
				padding: 10rpx 10rpx;
				margin: 10rpx 5rpx;
				border-radius: 10rpx;
				border: 2rpx solid #CCCCCC;
				color: #8E8E8E;
			}
		}
	}

	.hotSearch {
		display: inline-block; //text是没有padding的，需要将它转成块级元素
		font-size: 30rpx;
		font-weight: 700;
		padding: 20rpx 20rpx;
	}
	.hotSearch2{
		display: inline-block; //text是没有padding的，需要将它转成块级元素
		font-size: 30rpx;
		font-weight: 700;
		padding: 0rpx 20rpx;
		padding-top: 20rpx;
	}
</style>
